<script setup>
import { ref, onMounted } from 'vue'
import { getOrderAPI } from '@/api/user.js'
const params = ref({ orderState: 0, page: 1, pageSize: 2 })
const orderList = ref()
const getOrder = async () => {
  const res = await getOrderAPI(params.value)
  orderList.value = res.data.result
}
onMounted(() => {
  getOrder()
})
const orderState = (state) => {
  if (state === 1) return '待付款'
  if (state === 2) return '待发货'
  if (state === 3) return '待收货'
  if (state === 4) return '待评价'
  if (state === 5) return '已完成'
  if (state === 6) return '已取消'
  else return ''
}
const labels = ['待付款', '待发货', '待收货', '待评价', '已完成', '已取消']
</script>
<template>
  <div class="list">
    <el-tabs type="border-card">
      <el-tab-pane label="全部">
        <div v-for="i in orderList?.items" :key="i">
          <div class="head">
            <p>下单时间：{{ i.createTime }}</p>
            <p>订单编号：{{ i.id }}</p>
          </div>
          <div class="contain" v-for="sku in i.skus" :key="sku">
            <el-image :src="sku.image" class="skuImg"></el-image>
            <div>
              <h4>{{ sku.name }}</h4>
              <p>{{ sku.attrsText }}</p>
            </div>
            <p>￥{{ sku.realPay }}</p>
            <p>x{{ sku.quantity }}</p>
            <p>{{ orderState(i.orderState) }}</p>
            <div class="pay">
              <p>
                ￥<span class="payMoney">{{ i.payMoney }}</span>
              </p>
              <p>含运费：￥{{ i.postFee }}</p>
              <p>{{ i.payType === 1 ? '在线支付' : '货到付款' }}</p>
            </div>
            <el-link>查看详情</el-link>
          </div>
        </div></el-tab-pane
      >
      <el-tab-pane :label="label" v-for="(label, index) in labels" :key="label">
        <div
          v-for="i in orderList?.items.filter(
            (item) => item.orderState === index + 1
          )"
          :key="i"
        >
          <div class="head">
            <p>下单时间：{{ i.createTime }}</p>
            <p>订单编号：{{ i.id }}</p>
          </div>
          <div class="contain" v-for="sku in i.skus" :key="sku">
            <el-image :src="sku.image" class="skuImg"></el-image>
            <div>
              <h4>{{ sku.name }}</h4>
              <p>{{ sku.attrsText }}</p>
            </div>
            <p>￥{{ sku.realPay }}</p>
            <p>x{{ sku.quantity }}</p>
            <p>{{ orderState(i.orderState) }}</p>
            <div class="pay">
              <p>
                ￥<span class="payMoney">{{ i.payMoney }}</span>
              </p>
              <p>含运费：￥{{ i.postFee }}</p>
              <p>{{ i.payType === 1 ? '在线支付' : '货到付款' }}</p>
            </div>
            <el-link>查看详情</el-link>
          </div>
        </div></el-tab-pane
      >
    </el-tabs>
  </div>
</template>
<style scoped lang="scss">
.list {
  & > div {
    margin-bottom: 2%;
  }
  .contain {
    display: flex;
    font-family: 小可奶酪体;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    .pay {
      text-align: center;
    }
    .payMoney {
      color: red;
    }
  }
  .head {
    font-family: 鸿雷拙书简体;
    background-color: #cfccc9;
    display: flex;
    justify-content: start;
    p {
      margin-right: 5%;
    }
  }
  .skuImg {
    width: 10%;
  }
}
</style>
